import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import React, { useEffect, useRef } from "react";
import { Popconfirm, message } from "antd";
import { drawConfirmPass, drawConfirmUnpass } from "./service";
import type { ProColumns, ActionType } from "@ant-design/pro-table";

import type { TableListItem } from "./data";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const actionRef = useRef<ActionType>();
	// 表格项
	const columns: ProColumns[] = [
		{
			title: "日期",
			dataIndex: "time",
			valueType: "dateRange",
			hideInTable: true,
			search: {
				transform: (value: any) => ({
					startTime: value[0],
					endTime: value[1],
				}),
			},
		},
		{
			title: "创建时间",
			dataIndex: "createTime",
			search: false,
		},
		{
			title: "金额",
			dataIndex: "drawNum",
			search: false,
			render: (_, record) => {
				return <div> {record.drawNum / 100} </div>;
			},
		},
		{
			title: "支付方式",
			dataIndex: "drawType",
			search: false,
			valueEnum: {
				20: "微信",
			},
		},
		{
			title: "手机号",
			dataIndex: "phone",
			search: false,
		},
		{
			title: "userCode",
			dataIndex: "userCode",
			search: false,
		},
		{
			title: "用户名称",
			dataIndex: "userNickName",
			search: false,
		},
		{
			title: "用户真实名称",
			dataIndex: "userRealName",
			search: false,
		},
		{
			title: "状态",
			dataIndex: "status",
			search: false,
			valueEnum: {
				10: "申请提现",
				20: "提现成功",
				30: "提现失败",
				40: "申请拒绝",
			},
		},
		{
			title: "操作",
			dataIndex: "option",
			valueType: "option",
			width: 130,
			render: (_, record: TableListItem) => {
				if (record.status == 20 || record.status == 40) {
					return <div>-</div>;
				} else {
					return (
						<div>
							<span>
								<Popconfirm
									title="确定通过审核吗?"
									onConfirm={() => {
										handlePass(record);
									}}
									okText="确定"
									cancelText="取消"
								>
									<a className="globalSpan">通过</a>
								</Popconfirm>
							</span>
							<span style={{ marginLeft: 20 }}>
								<Popconfirm
									title="确定驳回吗?"
									onConfirm={() => {
										handleUnpass(record);
									}}
									okText="确定"
									cancelText="取消"
								>
									<a className="globalSpan">驳回</a>
								</Popconfirm>
							</span>
						</div>
					);
				}
			},
		},
	];

	const handlePass = async (values: any) => {
		try {
			const res = await drawConfirmPass({
				id: values.id,
			});
			if (res?.code === 200) {
				message.success(res.msg || "");
				actionRef.current?.reload();
			} else {
				message.error(res.msg || "");
			}
			return true;
		} catch (error) {
			message.error("操作失败请重试！");
			return false;
		}
	};

	const handleUnpass = async (values: any) => {
		// console.log(actionRef, "actionRef");
		// debugger;
		try {
			const res = await drawConfirmUnpass({
				id: values.id,
			});
			if (res?.code === 200) {
				message.success(res.msg || "");
				actionRef.current?.reload();
			} else {
				message.error(res.msg || "");
			}
			return true;
		} catch (error) {
			message.error("操作失败请重试！");
			return false;
		}
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		actionRef,
		listProps: {
			url: "/financial/draw-apply/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
	};

	// 初始化加载数据
	useEffect(() => {
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
